
<div style="POSITION: relative" id="content">
  <h3>使用easyUI创建一个课程表</h3>
  <div id="article_content" class="article_content">
    <p>这个教程将向你展示使用<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">jQuery EasyUI如何创建一个课程表,我们将创建两个<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">table:学校科目在左边时间表在右边,你可以拖动学校科目和放置到时间表表&#26684;中</span></span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">学校科目是一个<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">&lt;div
      class=&quot;item&quot;&gt;元素然而时间表表&#26684;是一个<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">&lt;td class=&quot;drop&quot;&gt;元素.</span></span></span></span></p>
    <p><img src="documentation/images/1344413996_6480.png" alt=""><br>
</p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 显示 学校科目</h4>
    <pre name="code" class="html">&lt;div class=&quot;left&quot;&gt;  
    &lt;table&gt;  
        &lt;tr&gt;  
            &lt;td&gt;&lt;div class=&quot;item&quot;&gt;English&lt;/div&gt;&lt;/td&gt;  
        &lt;/tr&gt;  
        &lt;tr&gt;  
            &lt;td&gt;&lt;div class=&quot;item&quot;&gt;Science&lt;/div&gt;&lt;/td&gt;  
        &lt;/tr&gt;  
        &lt;!-- other subjects --&gt;  
    &lt;/table&gt;  
&lt;/div&gt;  </pre>
    <p></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></span></span></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 显示时间表</h4>
    <pre name="code" class="html">&lt;div class=&quot;right&quot;&gt;  
    &lt;table&gt;  
        &lt;tr&gt;  
            &lt;td class=&quot;blank&quot;&gt;&lt;/td&gt;  
            &lt;td class=&quot;title&quot;&gt;Monday&lt;/td&gt;  
            &lt;td class=&quot;title&quot;&gt;Tuesday&lt;/td&gt;  
            &lt;td class=&quot;title&quot;&gt;Wednesday&lt;/td&gt;  
            &lt;td class=&quot;title&quot;&gt;Thursday&lt;/td&gt;  
            &lt;td class=&quot;title&quot;&gt;Friday&lt;/td&gt;  
        &lt;/tr&gt;  
        &lt;tr&gt;  
            &lt;td class=&quot;time&quot;&gt;08:00&lt;/td&gt;  
            &lt;td class=&quot;drop&quot;&gt;&lt;/td&gt;  
            &lt;td class=&quot;drop&quot;&gt;&lt;/td&gt;  
            &lt;td class=&quot;drop&quot;&gt;&lt;/td&gt;  
            &lt;td class=&quot;drop&quot;&gt;&lt;/td&gt;  
            &lt;td class=&quot;drop&quot;&gt;&lt;/td&gt;  
        &lt;/tr&gt;  
        &lt;!-- other cells --&gt;  
    &lt;/table&gt;  
&lt;/div&gt;  </pre>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 拖动在左侧的学校科目</h4>
    <pre name="code" class="javascript">$('.left .item').draggable({  
    revert:true,  
    proxy:'clone'  
});  </pre>
    <p></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></span></span></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 放置学校科目在时间表&#26684;上</h4>
    <pre name="code" class="javascript">$('.right td.drop').droppable({  
    onDragEnter:function(){  
        $(this).addClass('over');  
    },  
    onDragLeave:function(){  
        $(this).removeClass('over');  
    },  
    onDrop:function(e,source){  
        $(this).removeClass('over');  
        if ($(source).hasClass('assigned')){  
            $(this).append(source);  
        } else {  
            var c = $(source).clone().addClass('assigned');  
            $(this).empty().append(c);  
            c.draggable({  
                revert:true  
            });  
        }  
    }  
});  </pre>
    正如你所见的以上代码,当用户拖动在左侧的学校科目和放置到时间表&#26684;中,<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">onDrop 函数将被调用,我们克隆源元素拖动从左边和附加她到时间表&#26684;中,</span>
    <p></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">当拖动学校科目从时间表表&#26684;到其他表&#26684;,简单的移动它.</span></span></span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></span></span></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 EasyUI 示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/dd/downloads/easyui-timetable-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-timetable-demo.zip</a></div>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>